require('./PageNotice.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
import { Boxs, Tab, TextField, Toast, Group, NavBar } from 'saltui'
import PlusCircle from 'salt-icon/lib/PlusCircle';
import { Control } from 'react-keeper';
import CheckRound from 'salt-icon/lib/CheckRound';
import AngleLeft from 'salt-icon/lib/AngleLeft';
import ui from 'clientConfig/util/jsapi/ui'
const { HBox, Box, VBox } = Boxs;
const WithRefresh = require('components/withrefresh');
const PendingList = require('components/pendinglist');
const ListWithReceived = WithRefresh(
    PendingList,
    (pageNum, props, success, error) => {
        Actions.fetchReceive(pageNum, props, success, error)
    }
);
const ListWithSented = WithRefresh(
    PendingList,
    (pageNum, props, success, error) => {
        Actions.fetchSent(pageNum, props, success, error)
    }
);
var active = '0';
class Notice extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            active: active,
            className: '',
            isEidt: false,
            selectAll: false,
            selectType: -1//0主动，1被动
        };
        this.handleExchange = this.handleExchange.bind(this);
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this)
        this.handleOnRightClick = this.handleOnRightClick.bind(this);
        this.handleClickFootBtn = this.handleClickFootBtn.bind(this);
        this.handleClickAllIcon = this.handleClickAllIcon.bind(this);
        this.handleClickDelBtn = this.handleClickDelBtn.bind(this);
    }
    handleExchange(obj) {
        if (this.state.isEidt) {
            this.setState({ isEidt: false,selectType:-1,selectAll:false })

        }
        window.selectListItem = null;
        this.setState({ active: obj.active });
    }
    handleOnLeftClick() {
       ui.close();
    }
    //右侧导航按钮
    handleOnRightClick() {
        this.setState({ isEidt: !this.state.isEidt });
    }
    handleClickFootBtn() {
        Control.go('/home/notice/deliverNotice')
    }
    handleClickAllIcon(selectType = 0) {
        this.setState({ selectAll: !this.state.selectAll, selectType })
    }
    //删除按钮
    handleClickDelBtn() {
        let t = this;
        let cb = () => {
            t.setState({ isEidt: false })
            Toast.show({
                type: 'success',
                content: '删除成功'
            });
            if (this.state.active === '0') {
                var list = "ListWithReceived";
            } else {
                var list = "ListWithSented";
            }
            t.refs[list].onRefresh()
        }
        if (this.state.active === '0') {
            Actions.deleteReceive(cb);
        } else {
            Actions.deleteSent(cb);
        }

    }
    render() {
        var origin = "";
        let t = this;
        return (
            <div className="notice">
                <div className="bac"></div>
                <AngleLeft  onClick={this.handleOnLeftClick} className="left-btn" fill="white" with="30" height="30" />
                <div className="right-btn" onClick={this.handleOnRightClick}>{!this.state.isEidt ? '编辑' : '完成'}</div>
                <div className="mytab">
                    <Tab activeKey={t.state.active} onChange={this.handleExchange}>
                        <Tab.Item title={`已接收`} key='0'>
                            {!this.state.isEidt ? null :
                                <Group.Head className="t-LH44 head">
                                    <HBox vAlign="center">
                                        <Box className="t-ML10">
                                            {!this.state.selectAll ?
                                                <div className="circle" onClick={this.handleClickAllIcon.bind(t, 0)}></div> :
                                                <CheckRound
                                                    fill="#53CAC3"
                                                    width={20}
                                                    height={20}
                                                    onClick={this.handleClickAllIcon.bind(t, 0)}
                                                />
                                            }
                                        </Box>
                                        <Box flex={2} className="t-ML10">
                                            <span>全选</span>
                                        </Box>
                                        <Box flex={1} className="t-FAR"><div className="del-btn" onClick={this.handleClickDelBtn}>删除</div></Box>
                                    </HBox>
                                </Group.Head>
                            }
                            <ListWithReceived
                                className="msg"
                                ref="ListWithReceived"
                                tool={true}
                                refreshTitle={this.refreshTitle}
                                active={true}
                                isEidt={this.state.isEidt}
                                selectAll={this.state.selectAll}
                                leftSlip={false}
                                handleClickAllIcon={this.handleClickAllIcon}
                                selectType={this.state.selectType}
                            />
                        </Tab.Item>
                        <Tab.Item title={`已发送`} key='1'>
                            {!this.state.isEidt ? null :
                                <Group.Head className="t-LH60 head">
                                    <HBox vAlign="center">
                                        <Box className="t-ML10">
                                            {!this.state.selectAll ?
                                                <div className="circle" onClick={this.handleClickAllIcon.bind(t, 0)}></div> :
                                                <CheckRound
                                                    fill="#53CAC3"
                                                    width={20}
                                                    height={20}
                                                    onClick={this.handleClickAllIcon.bind(t, 0)}
                                                />
                                            }
                                        </Box>
                                        <Box flex={2} className="t-ML10">
                                            <span>全选</span>
                                        </Box>
                                        <Box flex={1} className="t-FAR"><div className="del-btn" onClick={this.handleClickDelBtn.bind(t, 0)}>删除</div></Box>
                                    </HBox>
                                </Group.Head>
                            }
                            {this.state.active &&
                                <ListWithSented
                                    ref="ListWithSented"
                                    className="msg"
                                    active={true}
                                    isEidt={this.state.isEidt}
                                    tabActive={this.state.active}
                                    selectAll={this.state.selectAll}
                                    selectType={this.state.selectType}
                                    handleClickAllIcon={this.handleClickAllIcon}
                                />}
                        </Tab.Item>
                    </Tab>
                </div>
                {!this.state.isEidt && <HBox vAlign='center' hAlign="center" className='my-footer fs16' onClick={this.handleClickFootBtn}>
                    <Box>
                        <PlusCircle fill="rgb(44,121,191)" />
                    </Box>
                    <Box className="t-ML15">添加</Box>
                </HBox>
                }
            </div>
        );
    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        active = this.state.active;
    }
}

reactMixin.onClass(Notice, Reflux.connect(Store));

module.exports = Notice;
